<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--公共样式-->
    <link href="./css/reset.css" rel="stylesheet" type="text/css" />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    
</head>

<body>
    <!--导航栏-->
    <div class="nav">
        <div class="container" class="cf">
            <span class="navspan1">乐购www.legou.com</span>
            <div class="navspan2">欢迎光临乐购&nbsp;请 <a id="lu">登录&nbsp;|</a>&nbsp;&nbsp; <a class="deng">注册</a>
            </div>
        </div>

        <!--登录框-->
        <!--logo栏-->
        <div class="container" class="cf">
            <div class="logo">
                <img src="./imgs/0-首页.jpg.png">
                <form class="myform1">
                    <input type="text" placeholder="请输入搜索的商品名" name="cname">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
        <div class="container">
            <ul class="lis1">
                <li>
                    <a style="color: #ffb810;">图书</a>
                    <a>电子书</a>
                    <a>原创文学</a>
                    <a>服装</a>
                    <a>户外运动</a>
                    <a>孕婴童</a>
                    <a>创意文具</a>
                    <a>地方特产</a>
                    <a>海外购</a>
                    <a>电器城</a>
                </li>
            </ul>
        </div>
        <div class="goubut container">
            <a href="#" id="goua2"><img src="./imgs/购物车.png">&nbsp;&nbsp;购物车<span>0</span></a>
            <a href="#" id="goua1">我的订单</a>
        </div>
    </div>
    <div style="height: 30px;width: 100%; background-color: #f4f4f4;margin-top: 110px;"></div>



    <!--轮播结构-->
    <div class="carousel container" @mouseenter="enter" @mouseleave="leave">
        <transition-group tag="ul" name="image" enter-active-class="animated lightSpeedIn"
            leave-active-class="animated lightSpeedOut">
            <li v-for='(image,index) in img' :key='index' v-show="index === mark">
                <a href="javascript:;">
                    <img :src="image">
                </a>
            </li>
        </transition-group>
        <div class="bullet">
            <span v-for="(item,index) in img.length" :class="{'active':index === mark}" @click="change(index)"
                :key="index"></span>
        </div>
        <div class="switch">
            <span class="prev" @click="prev">&lt;</span>
            <span class="next" @click="next">&gt;</span>
        </div>
    </div>
    <!--轮播里面的选项-->
    <div class="container">
        <div class="lunbox">
            <ul class="lunbolis">
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>

                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>

                </li>
                <li>
                    <a>图书</a>
                    <a>电子书</a>
                    <a>童书</a>
                    &nbsp;&nbsp;
                    <a>></a>
                </li>
            </ul>
        </div>
        <div class="nnnn1">
            <p>图书馆>>儿童书籍>>电子书馆>></p>
            <h3>文艺</h3>
            <p>
                <a>小说</a>
                <a>文学</a>
                <a>历史</a>
                <a>小说</a>
                <a>文化</a>
                <a>小说</a>
                <a>心理学</a>
                <a>政治</a>
            </p>
            <h3>人文社区</h3>
            <p>
                <a>小说</a>
                <a>小文学</a>
                <a>传记</a>
                <a>青春</a>
                <a>动漫</a>
                <a>艺术</a>
                <a>摄影</a>
                <a>明星</a>
            </p>
            <h3>教育</h3>
            <p>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
            </p>
            <h3>科技</h3>
            <p>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
            </p>
            <h3>生活</h3>
            <p>
                <a>两性</a>
                <a>孕期</a>
                <a>育儿</a>
                <a>保健</a>
                <a>运动</a>
                <a>休闲</a>
                <a>旅游</a>
                <a>小说</a>
            </p>
            <h3>进口书</h3>
            <p>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
                <a>小说</a>
            </p>

        </div>
    </div>
    </div>
    <!--4张banner图片-->
    <div class="container">
        <p class="bannerya">
            <img src="./imgs/lun2.jpg">
            <img src="./imgs/lun5.jpg">
            <img src="./imgs/lun3.jpg">
            <img src="./imgs/banneer.jpg.png">
        </p>
        <p class="banner2">
            <img src="./imgs/banner2.png">
        </p>
    </div>
    <!--倒计时-->
    <div class="container">
        <div class="fl">
            <div class="time">
                <div class="time2"></div>
            </div>
        </div>
        <div class="xiaoai">
            <ul class="ailis">
                <li><img src="./imgs/xiaoai.jpg">
                    <span
                        style="color:#686868; font-size: 18px; display: block;padding: 10px 0;">小米小爱蓝牙音箱&nbsp;play</span>
                    <span style="color:red">$129.00</span>&nbsp;<s style="color:#686868">$230.00</s>
                </li>
                <li><img src="./imgs/xiaoai.jpg">
                    <span
                        style="color:#686868; font-size: 18px; display: block;padding: 10px 0;">小米小爱蓝牙音箱&nbsp;play</span>
                    <span style="color:red">$129.00</span>&nbsp;<s style="color:#686868">$230.00</s>
                </li>
                <li><img src="./imgs/xiaoai.jpg">
                    <span
                        style="color:#686868; font-size: 18px; display: block;padding: 10px 0;">小米小爱蓝牙音箱&nbsp;play</span>
                    <span style="color:red">$129.00</span>&nbsp;<s style="color:#686868">$230.00</s>
                </li>
                <li><img src="./imgs/xiaoai.jpg">
                    <span
                        style="color:#686868; font-size: 18px; display: block;padding: 10px 0;">小米小爱蓝牙音箱&nbsp;play</span>
                    <span style="color:red">$129.00</span>&nbsp;<s style="color:#686868">$230.00</s>
                </li>
            </ul>
        </div>
    </div>

    <!--每日好货推荐-->
    <div class="container cf">
        <div style="margin:0 40%;">
            <h3 style="text-align: center;margin-top:350px;margin-bottom: 30px;"><img src="./imgs/sprite.png">每日好货推荐<img
                    src="./imgs/sprite.png"></h3>
        </div>
        <div class="maxleft">
            <div><img src="./imgs/0-首页 拷贝.jpg"></div>
            <p>品质好物&numsp;天天低价&numsp;<a>>></a></p>
            <p class="hehe">
                <img src="imgs/tui1.jpg.png">
                <img src="imgs/tui1.jpg.png">
                <img src="imgs/tui1.jpg.png">
            </p>

        </div>
        <div class="maxright">
            <div class="haha1"><img src="./imgs/hehehehe.jpg"></div>
            <p>品质好物&numsp;天天低价&numsp;<a>>></a></p>
            <p class="haha">
                <img src="imgs/tui1.jpg.png">
                <img src="imgs/tui1.jpg.png">
                <img src="imgs/tui1.jpg.png">
            </p>
        </div>
    </div>
    <!--选项卡1-->
    <div style="background-color: #f4f4f4; padding-top: 28px;height: 2800px;margin-top: 30px;">
        <div class="container">
            <div class="wuwu">
                <img src="./imgs/heheheh.jpg"/>
            </div>
            <div class="tab" style="position: relative;">
                <ul class="clearfix ys" style="position: absolute;left: 974px;top: -56px;">
                    <li class="btn"> 童装</li>
                    <li> 精品男装</li>
                    <li> 热销内衣</li>
                </ul>
                <!--内容-->
                <div class="con">
                    <div class="con-1 active cf">
                        <div style="float: left;">
                            <img src="./imgs/huangjin.jpg" style="height: 330px;width: 265px;margin: 10px 0;">
                            <p id="pp1" style="width: 265px;">
                                <button>内衣</button>
                                <button>泳衣</button>
                                <button>功能箱包</button>
                                <button>男装</button>
                                <button>女装</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>全部分类</button>
                            </p>
                        </div>
                        <!--小轮播-->
                        <div style="float: left;width: 470px;">
                            <div class="maxbox">
                                <ul class="minbox">
                                    <li><img src="imgs/timg.jpg"></li>
                                    <li><img src="imgs/miao1.jpg"></li>
                                    <li><img src="imgs/miao3.jpg"></li>
                                </ul>
                            </div>
                            <img src="./imgs/timg.jpg" style="width: 455px;height: 150px;margin-left: 10px;">
                        </div>
                        <div class="cf">
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="con-1">
                        第二页 </div>
                    <div class="con-1">
                        第三页 </div>
                </div>
            </div>
            <div>
                <img src="./imgs/shazi.jpg">
            </div>
            <p style="height:100px;width: 1200px;"></p>
            <!--选项卡2-->
            <div class="wuwu">
                <img src="./imgs/guaxi1.jpg"/>
            </div>
            <div class="tab2" style="position: relative;">
                <ul class="clearfix2 ys2" style="position: absolute;left: 974px;top: -56px;">
                    <li class="btn2" > 童装</li>
                    <li> 精品男装</li>
                    <li> 热销内衣</li>
                </ul>
                <!--内容-->
                <div class="con2">
                    <div class="con-2 active2 cf">
                        <div style="float: left;">
                            <img src="./imgs/huangjin3.jpg" style="height: 330px;width: 265px;margin: 10px 0;">
                            <p id="pp2" style="width: 265px;">
                                <button>内衣</button>
                                <button>泳衣</button>
                                <button>功能箱包</button>
                                <button>男装</button>
                                <button>女装</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>全部分类</button>
                            </p>
                        </div>
                        <!--小轮播-->
                        <div style="float: left;width: 470px;">
                            <div class="maxbox2">
                                <ul class="minbox2">
                                    <li><img src="imgs/15688822904603.jpg.jpg"></li>
                                    <li><img src="imgs/miao2.jpg"></li>
                                    <li><img src="imgs/miao1.jpg"></li>
                                </ul>
                            </div>


                            
                            <img src="./imgs/timg.jpg" style="width: 455px;height: 150px;margin-left: 10px;">
                        </div>
                        <div class="cf">
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="con-2">
                        第二页 </div>
                    <div class="con-2">
                        第三页 </div>
                </div>
            </div>
            <div>
                <img src="./imgs/shazi.jpg">
            </div>
            <p style="height:100px;width: 1200px;"></p>
            <!--选项3-->
            <div class="wuwu">
                <img src="./imgs/guaguagua0.jpg"/>
            </div>
            <div class="tab3" style="position: relative;">
                <ul class="clearfix3 ys3" style="position: absolute;left: 974px;top: -56px;">
                    <li class="btn3"> 童装</li>
                    <li> 精品男装</li>
                    <li> 热销内衣</li>
                </ul>
                <!--内容-->
                <div class="con3">
                    <div class="con-3 active3 cf">
                        <div style="float: left;">
                            <img src="./imgs/nannan.jpg" style="height: 330px;width: 265px;margin: 10px 0;">
                            <p id="pp3" style="width: 265px;">
                                <button>内衣</button>
                                <button>泳衣</button>
                                <button>功能箱包</button>
                                <button>男装</button>
                                <button>女装</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>全部分类</button>
                            </p>
                        </div>
                        <!--小轮播-->
                        <div style="float: left;width: 470px;">
                            <div class="maxbox3">
                                <ul class="minbox3">
                                    <li><img src="imgs/nan1.jpg"></li>
                                    <li><img src="imgs/nan2.jpg"></li>
                                    <li><img src="imgs/nan3.jpg"></li>
                                </ul>
                            </div>
                            <img src="./imgs/timg.jpg" style="width: 455px;height: 150px;margin-left: 10px;">
                        </div>
                        <div class="cf">
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/bke8inc23HmrUNGh1T1811271432_180_144.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="con-3">
                        第二页 </div>
                    <div class="con-3">
                        第三页 </div>
                </div>
            </div>
            <div>
                <img src="./imgs/shazi.jpg">
            </div>
            <p style="height:100px;width: 1200px;"></p>


            <!--选项卡4-->
            <div class="wuwu">
                <img src="./imgs/guagua9.jpg"/>
            </div>
            <div class="tab4" style="position: relative;">
                <!-- <ul class="clearfix4 ys4">
                    <li class="btn4" style="float: right;"> 童装</li>
                    <li style="float: right;"> 精品男装</li>
                    <li style="float: right;"> 热销内衣</li>
                </ul> -->
                 <ul class="clearfix4 ys4" style="position: absolute;left: 974px;top: -56px;">
                    <li class="btn4"> 童装</li>
                    <li> 精品男装</li>
                    <li> 热销内衣</li>
                </ul>
                <!--内容-->
                <div class="con4">
                    <div class="con-4 active4 cf">
                        <div style="float: left;">
                            <img src="./imgs/huangjin3.jpg" style="height: 330px;width: 265px;margin: 10px 0;">
                            <p id="pp4" style="width: 265px;">
                                <button>内衣</button>
                                <button>泳衣</button>
                                <button>功能箱包</button>
                                <button>男装</button>
                                <button>女装</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>内衣</button>
                                <button>全部分类</button>
                            </p>
                        </div>
                        <!--小轮播-->
                        <div style="float: left;width: 470px;">
                            <div class="maxbox4">
                                <ul class="minbox4">
                                    <li><img src="imgs/timg.jpg"></li>
                                    <li><img src="imgs/miao1.jpg"></li>
                                    <li><img src="imgs/miao3.jpg"></li>
                                </ul>
                            </div>
                            <img src="./imgs/timg.jpg" style="width: 455px;height: 150px;margin-left: 10px;">
                        </div>
                        <div class="cf">
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/neiyi.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/neiyi.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/neiyi.jpg">
                                </li>
                            </ul>
                            <ul
                                style="width: 210px;height: 220px;float: left;background: rgb(255, 255, 255);margin: 10px;">
                                <li style="text-align: center;"><span style="font-size: 20px;">时尚精致女装</span><br />
                                    <span style="margin:10px 0;display: block;">春夏99选2</span>
                                    <img src="./imgs/neiyi.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="con-4">
                        第二页 </div>
                    <div class="con-4">
                        第三页 </div>
                </div>
            </div>
            <div>
                <img src="./imgs/shazi.jpg">
            </div>
            <p style="height:50px;width: 1200px;"></p>
        </div>
    </div>
    <!--底部-->
    <div class="container">
        <div class="axiba">
            <img src="./imgs/wowosss.png" style="width: 1200px;">
            <div id="boxhao">
                <ul>
                    <li style="font-size: 20px;color: black;">新手入门</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                    <li>服务协议及隐私说明</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                </ul>
                <ul>
                    <li style="font-size: 20px;color: black;">支付方式</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                </ul>
                <ul>
                    <li style="font-size: 20px;color: black;">配送服务</li>
                    <li>配送进度查询</li>
                    <li>商品验货及签收</li>
                </ul>
                <ul>
                    <li style="font-size: 20px;color: black;">相关规则</li>
                    <li>新手入门</li>
                    <li>退款货政策</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                    <li>新手入门</li>
                </ul>
                <p class="fule">
                    <ul>
                        加微信查订单
                        <li><img src="./imgs/qryhd.png"></li>
                    </ul>

                    <ul>
                        app更加优惠
                        <li><img src="./imgs/qryhd.png"></li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
    <div style="background-color:  #f4f4f4;margin-top: 260px;">
        <p style="text-align: center;padding: 20px;color: #898989;">hi殴斗辅导辅导费IDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>

        <p style="text-align: center;padding-bottom:20px ;"><img src="./imgs/xin.jpg">&nbsp;<img src="./imgs/xin3.jpg">&nbsp;<img src="./imgs/xin4.png">&nbsp;<img src="./imgs/xin2.png">&nbsp;<img src="./imgs/xin5.jpg"></p>
    </div>

<!--侧边栏-->
    <div class="bianbian"></div>
    <div class="bianbian2">
        <P style="text-align: center;margin-top: 10px;">下载APP</P>
        <img src="./imgs/qryhd.png" style="margin:5px 16px;">
        <p style="line-height: 20px;color:#7f7f7f;margin-top: 10px;border-top: 1px #7f7f7f dashed;padding-top: 10px;"><img src="./imgs/购物车空.png" style="width: 30px;margin-left: 16px;">&nbsp;购物车</p>
    </div>
</body>

<!--自己写的js链接-->
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>
<!--轮播插件-->
<script src="./lib/jquery.js"></script>
<script src="./lib/vue.min.js"></script>


<script>
    //轮播   轮播
    vm = new Vue({
        el: '.carousel',
        data: {
            mark: 0,
            img: [
                'imgs/lun1.jpg',
                'imgs/lunlun.jpg',
                'imgs/lunlun6.jpg',
                'imgs/lunlun2.jpg',
            ],
            time: null
        },
        methods: {   //添加方法
            change(i) {
                this.mark = i;
            },
            prev() {
                this.mark--;
                if (this.mark === -1) {
                    this.mark = 3;
                    return
                }
            },
            next() {
                this.mark++;
                if (this.mark === 4) {
                    this.mark = 0;
                    return
                }
            },
            autoPlay() {
                this.mark++;
                if (this.mark === 4) {
                    this.mark = 0;
                    return
                }
            },
            play() {
                this.time = setInterval(this.autoPlay, 3000);
            },
            enter() {
                //console.log('enter')
                clearInterval(this.time);
            },
            leave() {
                console.log('leave')
                this.play();
            }
        },
        created() {
            this.play()
        }
    })
</script>
</html>